<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>

    <meta charset='utf-8'/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link th:href="@{/fullcalendar/core/main.css}" rel='stylesheet'/>
    <link th:href="@{/fullcalendar/daygrid/main.css}" rel='stylesheet'/>
    <link th:href="@{/fullcalendar/timegrid/main.css}" rel='stylesheet'/>
    <link th:href="@{/assets/libs/layui/css/layui.css}" media="all" rel="stylesheet">
    <link th:href="@{/assets/common.css}" media="all" rel="stylesheet">
    <link th:href="@{/wms/css/ry-ui.css?v=3.3.0}" rel="stylesheet"/>


    <style>

        #daywork {
            overflow: scroll !important;
        }

        #calendar {
            max-width: 1200px;
            margin: 0 15px;
        }

        #external-events {
            float: left;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: center;
        }

        #external-events h4 span {
            font-size: 16px;
            margin-top: 0;
            padding-top: 1em;
        }

        .external-event { /* try to mimick the look of a real event */
            margin: 10px 0;
            padding: 2px 4px;
            background: #3366CC;
            color: #fff;
            font-size: .85em;
            cursor: pointer;
        }

        /*日期控件*/
        .layui-laydate-content > .layui-laydate-list {
            padding-bottom: 0px;
            /*overflow: hidden;*/
        }

        .layui-laydate-content > .layui-laydate-list > li {
            width: 50%
        }

        /* pop */
        .popper,
        .tooltip {
            position: absolute;
            z-index: 9999;
            background: #FFC107;
            color: black;
            width: 150px;
            border-radius: 3px;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
            padding: 10px;
            text-align: center;
        }

        .style5 .tooltip {
            background: #1E252B;
            color: #FFFFFF;
            max-width: 200px;
            width: auto;
            font-size: .8rem;
            padding: .5em 1em;
        }

        .popper .popper__arrow,
        .tooltip .tooltip-arrow {
            width: 0;
            height: 0;
            border-style: solid;
            position: absolute;
            margin: 5px;
        }

        .tooltip .tooltip-arrow,
        .popper .popper__arrow {
            border-color: #FFC107;
        }

        .style5 .tooltip .tooltip-arrow {
            border-color: #1E252B;
        }

        .popper[x-placement^="top"],
        .tooltip[x-placement^="top"] {
            margin-bottom: 5px;
        }

        .popper[x-placement^="top"] .popper__arrow,
        .tooltip[x-placement^="top"] .tooltip-arrow {
            border-width: 5px 5px 0 5px;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            bottom: -5px;
            left: calc(50% - 5px);
            margin-top: 0;
            margin-bottom: 0;
        }

        .popper[x-placement^="bottom"],
        .tooltip[x-placement^="bottom"] {
            margin-top: 5px;
        }

        .tooltip[x-placement^="bottom"] .tooltip-arrow,
        .popper[x-placement^="bottom"] .popper__arrow {
            border-width: 0 5px 5px 5px;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
            top: -5px;
            left: calc(50% - 5px);
            margin-top: 0;
            margin-bottom: 0;
        }

        .tooltip[x-placement^="right"],
        .popper[x-placement^="right"] {
            margin-left: 5px;
        }

        .popper[x-placement^="right"] .popper__arrow,
        .tooltip[x-placement^="right"] .tooltip-arrow {
            border-width: 5px 5px 5px 0;
            border-left-color: transparent;
            border-top-color: transparent;
            border-bottom-color: transparent;
            left: -5px;
            top: calc(50% - 5px);
            margin-left: 0;
            margin-right: 0;
        }

        .popper[x-placement^="left"],
        .tooltip[x-placement^="left"] {
            margin-right: 5px;
        }

        .popper[x-placement^="left"] .popper__arrow,
        .tooltip[x-placement^="left"] .tooltip-arrow {
            border-width: 5px 0 5px 5px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            right: -5px;
            top: calc(50% - 5px);
            margin-left: 0;
            margin-right: 0;
        }

        .layui-input-block{
            margin-left: 80px;
        }
        /*左右按钮居中*/
        .fc-button .fc-icon{
            margin-top: -10px;
        }
    </style>
</head>
<body id="daywork" style="overflow: scroll !important;">

<div class="layui-fluid" >
    <div class="layui-card" style="padding-top: 5px; margin-bottom: 8px;">
        <div class="layui-row layui-col-space15">


            <div class="layui-col-xs12 layui-col-md2">
                <div class="ui-layout-west">
                    <div class="main-content">
                        <div class="box box-main">
                            <div class="box-header">
                                <div class="box-title">
                                    <i class="fa icon-grid"></i> 组织机构
                                </div>
                                <div class="box-tools pull-right">
                                    <a type="button" class="btn btn-box-tool menuItem" href="#" onclick="dept()"
                                       title="管理部门"><i
                                            class="fa fa-edit"></i></a>
                                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开"
                                            style="display:none;"><i
                                            class="fa fa-chevron-up"></i></button>
                                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                                            class="fa fa-chevron-down"></i></button>
                                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
                                            class="fa fa-refresh"></i></button>
                                </div>
                            </div>
                            <div class="ui-layout-content">
                                <div id="tree" class="ztree"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id='external-events'>
                    <h4>班次</h4>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-md10">
                <div class="container-div ui-layout-center">
                    <div class="row">
                        <div class="col-sm-12 search-collapse">
                            <form id="user-form">
                                <input type="hidden" id="deptId" name="deptId">
                                <input type="hidden" id="parentId" name="parentId">
                                <div class="select-list">
                                    <ul>
                                        <li>
                                            登录名称：<input type="text" name="loginName"/>
                                        </li>
                                        <li>
                                            手机号码：<input type="text" name="phonenumber"/>
                                        </li>
                                        <li>
                                            用户状态：<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
                                            <option value="">所有</option>
                                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                                    th:value="${dict.dictValue}"></option>
                                        </select>
                                        </li>
                                        <li class="select-time">
                                            <label>创建时间： </label>
                                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                                   name="params[beginTime]"/>
                                            <span>-</span>
                                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                                   name="params[endTime]"/>
                                        </li>
                                        <li>
                                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                                    class="fa fa-search"></i>&nbsp;搜索</a>
                                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>

                        <div class="btn-group-sm hidden" id="toolbar" role="group">
                            <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:user:add">
                                <i class="fa fa-plus"></i> 新增
                            </a>
                            <a class="btn btn-primary btn-edit disabled" onclick="$.operate.editTab()"
                               shiro:hasPermission="system:user:edit">
                                <i class="fa fa-edit"></i> 修改
                            </a>
                            <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()"
                               shiro:hasPermission="system:user:remove">
                                <i class="fa fa-remove"></i> 删除
                            </a>
                            <a class="btn btn-info" onclick="$.table.importExcel()" shiro:hasPermission="system:user:import">
                                <i class="fa fa-upload"></i> 导入
                            </a>
                            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:user:export">
                                <i class="fa fa-download"></i> 导出
            </a>
<a class="btn btn-primary" onclick="$.table.print()">
            <i class="fa fa-plus"></i> 打印
</a>
                        </div>

                        <div class="col-sm-12 select-table table-striped">
                            <table id="bootstrap-table" data-mobile-responsive="true"></table>
                        </div>
                    </div>
                </div>
                <div id='calendar'></div>
            </div>
        </div>
    </div>
</div>


<!-- 表单弹框 -->
<script type="text/html" id="calendarForm">
    <form lay-filter="calendarForm" class="layui-form model-form">
        <input name="id" id="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">预约主题</label>
            <div class="layui-input-block">
                <input name="appointTheme" placeholder="请输入会议主题" type="text" class="layui-input" maxlength="50"
                       lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">预约开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="stime" name="stime" placeholder="请选择开始时间" lay-verify="required"
                       required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">预约结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="etime" name="etime" placeholder="请选择结束时间" lay-verify="required"
                       required>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="formSubmit" lay-submit>保存</button>
            <button class="layui-btn" type="button" id="delEdit" onclick="del()">删除</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:src="@{/fullcalendar/core/main.js}"></script>
<script th:src="@{/fullcalendar/core/locales-all.js}"></script>
<script th:src="@{/fullcalendar/daygrid/main.js}"></script>
<script th:src="@{/fullcalendar/interaction/main.js}"></script>
<script th:src="@{/fullcalendar/timegrid/main.js}"></script>
<script th:src="@{/fullcalendar/core/locales/zh-cn.js}"></script>
<script th:src="@{/fullcalendar/popper.min.js}"></script>
<script th:src="@{/fullcalendar/tooltip.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/libs/layui/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/calendar/index.js}"></script>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>

<script th:inline="javascript">
    var ctx = [[@{/}]];
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
    var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
    var prefix = ctx + "system/user";

    $(function () {

        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});

        queryUserList();
        queryDeptTree();
    });

    function queryUserList() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            sortName: "createTime",
            sortOrder: "desc",
            modalName: "用户",
            columns: [{
                checkbox: true
            },
                {
                    field: 'userId',
                    title: '用户ID'
                },
                {
                    field: 'loginName',
                    title: '登录名称',
                    sortable: true
                },
                {
                    field: 'userName',
                    title: '用户名称'
                },
                {
                    field: 'dept.deptName',
                    title: '部门'
                },
                {
                    field: 'email',
                    title: '邮箱',
                    visible: false
                },
                {
                    field: 'phonenumber',
                    title: '手机'
                },
                {
                    visible: false,
                    title: '用户状态',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return statusTools(row);
                    }
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    visible:false,
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.editTab(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        actions.push('<a class="btn btn-info btn-xs ' + resetPwdFlag + '" href="#" onclick="resetPwd(\'' + row.userId + '\')"><i class="fa fa-key"></i>重置</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    function queryDeptTree() {
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };

        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);

            debugger
            $.table.search();
        }
    }

    $('#btnExpand').click(function () {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function () {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function () {
        queryDeptTree();
    });

    /* 用户状态显示 */
    function statusTools(row) {
        if (row.status == 1) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.userId + '\')"></i> ';
        }
    }

    /* 用户管理-部门 */
    function dept() {
        var url = ctx + "system/dept";
        createMenuItem(url, "部门管理");

    }
</script>
</body>
</html>